<template>

  <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left:30px;margin-top:20px">
    <el-tab-pane>
      <span slot="label">
        <svg-icon icon-class="shoucang" />{{"\xa0\xa0"}}全部收藏</span>

      <el-table :data="allCollects" style="width: 100%">
        <el-table-column prop="typeName" label="类别" width="150">
          <template slot-scope="scope">
            <el-tag :type="activation(scope.row.typeName)">{{scope.row.typeName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="projectName" label="标题" width="1100">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.projectName}}</el-link>
          </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>
    <el-tab-pane>
      <span slot="label">
        <svg-icon icon-class="dujia" />{{"\xa0\xa0"}}团游收藏</span>

      <el-table :data="groupCollects" style="width: 100%">
        <el-table-column prop="projectName" label="标题" width="1100">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.projectName}}</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>

    <el-tab-pane>
      <span slot="label">
        <svg-icon icon-class="jingdian" />{{"\xa0\xa0"}}景点收藏</span>
      
      <el-table :data="scenicCollects" style="width: 100%">
        <el-table-column prop="projectName" label="标题" width="1100">
          <template slot-scope="scope">
            <el-link type="primary" @click="findScenic(scope.row.projectId)">{{scope.row.projectName}}</el-link>
          </template>
        </el-table-column>
      </el-table>

    </el-tab-pane>
    <el-tab-pane>
      <span slot="label">
        <svg-icon icon-class="youji" />{{"\xa0\xa0"}}游记收藏</span>
      
      <el-table :data="travelCollects" style="width: 100%">
        <el-table-column prop="projectName" label="标题" width="1100">
          <template slot-scope="scope">
            <el-link type="primary" @click="findTravelNotes(scope.row.projectId)">{{scope.row.projectName}}</el-link>
          </template>
        </el-table-column>
      </el-table>

    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import {login, showAllCollects} from "@/api/user";
  import {showTypesCollects} from "@/api/user";
  import {findTravelNotesById} from  "@/api/travelnotes";
  export default {
    computed: {
      activation() {
        return (icontent) => { // 使用JavaScript闭包，进行传值操作         
          if (icontent === "景点攻略") {
            return 'success'
          } else if (icontent === "用户游记") {
            return 'warning'
          } else if (icontent === "团游项目") {
            return 'danger'
          }
        }
      }
    },
    data() {
      return {
        typesCollects1:{
          userId:'',
          typeName:'',
        },
        typesCollects2:{
          userId:'',
          typeName:'',
        },
        typesCollects3:{
          userId:'',
          typeName:'',
        },
        allCollects: [{
          typeName: '',
          projectName: ''
        }],
        groupCollects: [{
          projectId:'',
          projectName: ''
        }],
        travelCollects: [{
          projectId:'',
          projectName: '',
        }],
        scenicCollects: [{
          projectId:'',
          projectName: ''
        }],
        
        activeName: 'second'
      };
    },
    created() {
      this.showAllCollects()
      this.showTypesCollects1()
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      showAllCollects() {
        var id = this.$store.getters.userId
        showAllCollects(id).then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.allCollects = res.data
          }
        })
      },
      showTypesCollects1(){
        this.typesCollects1.userId = this.$store.getters.userId
        this.typesCollects1.typeName = '景点攻略'
        showTypesCollects(this.typesCollects1).then((res => {
          if(res.code == 200){
            console.log(res);
            this.scenicCollects = res.data
          }
        }))
        this.typesCollects2.userId = this.$store.getters.userId
        this.typesCollects2.typeName = '团游项目'
        showTypesCollects(this.typesCollects2).then((res => {
          if(res.code == 200){
            console.log(res);
            this.groupCollects = res.data
          }
        }))
        this.typesCollects3.userId = this.$store.getters.userId
        this.typesCollects3.typeName = '用户游记'
        showTypesCollects(this.typesCollects3).then((res => {
          if(res.code == 200){
            console.log(res);
            this.travelCollects = res.data
          }
        }))
      },  
      findTravelNotes(notesId){
        console.log(notesId);
        this.$router.push({
          name:"readTravelNote",
          query:{
            item:{
              notesId:notesId
            }
          }
        })
      },
      findScenic(scenicId){
        console.log(scenicId);
        this.$router.push({
          name:"scenicDetails",
          query:{
            item:{
              notesId:scenicId
            }
          }
        })
      },
      
    }
  };

</script>
